<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="nav">
        <div class="head">
            <a class="well" href="">Wellcome To Happy World</a>
            <div class="a">
                <div class="b">更多...</div>
                <div class="c">
                    <ul>
                        <li><a href="#one">关于我</a></li>
                        <li><a href="#two">旅行</a></li>
                        <li><a href="#three">生活</a></li>
                        <li><a href="#four">联系我</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-img">
            <!-- <img src="/images/nav01.png" alt=""> -->
            <img src="images/nav02.png" alt="">
            <img src="images/nav03.png" alt="">
            <img src="images/nav04.png" alt="">
            <img src="images/nav05.png" alt=""> 
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        </div>
        <div class="nav-wrap">
            <img src="images/头像.jpg" alt="">
            <h3>Wanglu's</h3>
            <h4>Personal Page</h4>
        </div> 
        
    </div>
    <div class="main">
        <div class="main-head">
            <div><img src="../index/images/01(1).jpg" alt=""></div>
            <div><img src="../index/images/01 (2).jpg" alt=""></div>
            <div><img src="../index/images/01 (3).jpg" alt=""></div>
            <div><img src="../index/images/01 (4).jpg" alt=""></div>
        </div>
        <div id="one" class="ziji">
            <h3>关于我</h3>
            <img src="../index/images/ziji.jpg" alt="">
            <div>
                <p>姓名：王璐</p>
                <p>专业：信息管理与信息系统</p>
                <p>性格：热情开朗 活泼好动</p>
                <span>
                    干啥啥不行 吃饭第一名！
                </span>
            </div>
        </div>
        <div id="two" class="lvxing">
            <h3>关于旅行</h3>
            <div class="box-left">       
                <img src="images/neimeng (1).jpg" alt="背景图">
                <div class="back">
                    <p></p>
                </div>
            </div>
            <div class="lvxing-center">
                <ul>
                    <li><a href="#">惊！女生出去玩到底能吃多少</a></li>
                    <li><a href="#">厦门必打卡xx景点</a></li>
                    <li><a href="#">震惊：竟然还有比茶x悦x更好喝的奶茶...</a></li>
                    <li><a href="#">没想到长沙最好吃的小龙虾是他们家</a></li>
                    <li><a href="#">揭秘：某王姓女子现在最想去的竟然是...</a></li>
                    <li><a href="#">更多...</a></li>
                </ul>
            </div>
            <div class="box-right">       
                <img src="images/guangzhou1 (3).jpg" alt="背景图">
                <div class="back">
                    <p></p>
                </div>
            </div>
        </div>
        <div id="three" class="life">
            <h3>美食生活</h3>
            <div class="wrap">
                <!--包裹所有元素的容器-->
                <div class="cube">
                    <!--前面图片 -->
                    <div class="out_front">
                        <img src="images/1 (1).jpg" class="pic" />
                    </div>
                    <!--后面图片 -->
                    <div class="out_back">
                        <img src="images/1 (2).jpg" class="pic" />
                    </div>
                    <!--左面图片 -->
                    <div class="out_left">
                        <img src="images/1 (3).jpg" class="pic" />
                    </div>
                    <!--右面图片 -->
                    <div class="out_right">
                        <img src="images/1 (4).jpg" class="pic" />
                    </div>
                    <!--上面图片 -->
                    <div class="out_top">
                        <img src="images/1 (5).jpg" class="pic" />
                    </div>
                    <!--下面图片 -->
                    <div class="out_bottom">
                        <img src="images/1 (6).jpg" class="pic" />
                    </div>
        
                    <!--小正方体 -->
                    <span class="in_front">
                        <img src="images/下载.jpg" class="in_pic" />
                    </span>
                    <span class="in_back">
                         <img src="images/下载.jpg" class="in_pic" />
                    </span>
                    <span class="in_left">
                        <img src="images/下载.jpg" class="in_pic" />
                    </span>
                    <span class="in_right">
                        <img src="images/下载.jpg" class="in_pic" />
                    </span>
                    <span class="in_top">
                        <img src="images/下载.jpg" class="in_pic" />
                    </span>
                    <span class="in_bottom">
                        <img src="images/下载.jpg" class="in_pic" />
                    </span>
                </div>
        
            </div>
            <div class="life-left">
                <p>吃好喝好</p>
            </div>
            <div class="life-right">
                <p>长生不老</p>
            </div>
        </div>
        <div id="four" class="xuexi">
            <h3>联系我</h3>
           <div class="lianxi">
               <img src="images/lianxi.jpg" alt="">
           </div>
           <div class="message">
            <form>
                <div class="group">
                  <input required="" type="text"><label>Name</label>
                </div>
                <div class="group">
                  <input required="" type="email"></span><label>Email</label>
                </div>
                <div class="group">
                  <textarea required=""></textarea><label>Message</label>
                </div>
                <input id="sendMessage" name="sendMessage" type="submit" value="Send Message">
              </form>
           </div>
           <div class="bottom">
               <p>@2020 wanglu </p>
               <p>最终解释权归王璐所有</p>
           </div>
            
        </div>
    </div>
    <script>
        var index=0;
         $("#next").click(function(){
             index++;
             console.log(index)
             if (index > 3) {
                 index = 0;
             }
             animate(1000)
        })
        
        $("#prev").click(function(){
             index--;
             if (index < 0) {
                 index = 3;
             }
             animate(1000)
        })
        $("#btns span").click(function(){
             index = $(this).index();
             // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
              //$("#btns span").eq(index).addClass("current").siblings().removeClass("current")
             animate(1000)
         })
         function animate(speed) {
             $(".nav-img img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
             $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
         }
    </script>
</body>
</html>